<template>
    <div class="animation-setting">
        <a-button style="width: 100%;" @click="clearColor">清除动画</a-button>
        <a-divider />
        <a-collapse :bordered="false" style="background-color: transparent;" v-model:activeKey="activeKey" accordion>
            <a-collapse-panel v-for="(item,index) in animations" :key="index" :header="item.label">
                <a-row :gutter="5">
                    <a-col 
                        v-for="child in item.children" 
                        :key="child.value"
                        :span="8"
                        @mouseover="hoverPreviewAnimate = child.value"
                        @click="addAnimation(child)"
                    >
                        <a-button 
                            class="ani-item btn-ani" 
                            :class="[
                                hoverPreviewAnimate == child.value && `animate__animated  animate__${child.value}`,
                                activeColor(child.value) && 'active'
                            ]" 
                        >
                            {{ child.label }}
                        </a-button>
                    </a-col>
                </a-row>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useTargetData } from '../../hooks/useTargetData';
import { useThemeConfig } from '@/stores/themeConfig';


const themeConfigStore = useThemeConfig()
const {targetData} = useTargetData()
const activeKey = ref([]);
const hoverPreviewAnimate = ref('')
const themeColor = computed(()=>themeConfigStore.themeConfig.primary)

const animations = [
    {
        label:'强调动画',
        children:[
            { label: '弹跳', value: 'bounce' },
            { label: '闪烁', value: 'flash' },
            { label: '放大缩小', value: 'pulse' },
            { label: '放大缩小弹簧', value: 'rubberBand' },
            { label: '左右晃动', value: 'headShake' },
            { label: '左右扇形摇摆', value: 'swing' },
            { label: '放大晃动缩小', value: 'tada' },
            { label: '扇形摇摆', value: 'wobble' },
            { label: '左右上下晃动', value: 'jello' },
        ]
    }
]

const activeColor = (value:string)=>{
    const selectVal = targetData.value.styles.animations
    if(!selectVal.length) return false
    return selectVal[0] === value
}

const addAnimation = (item:any)=>{
    targetData.value.styles.animations = [item.value]
}

const clearColor = ()=>{
    targetData.value.styles.animations = []
}
</script>

<style lang='scss' scoped>
.animation-setting {
    :deep(.ant-col){
        margin-bottom: 10px;
    }
    .btn-ani{
        width: 100%;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ani-item{
        &.active{
            color:v-bind("themeColor");
            border:1px solid v-bind("themeColor");
        }
    }
}
</style>